<!DOCTYPE html>
<html lang="en">
<!-- 公司新闻 -->
<!-- 展览设计第四套模块 1-3 -->

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../css/bootstrap4.5.min.css" />
    <link rel="stylesheet" href="../css/swiper-bundle.min.css" />
    <link rel="stylesheet" href="../css/public.css" />
    <style>
        .part_imgText_text>p{
            text-align: center;
            font-size: var(--f_describe);
            line-height: var(--l_describe);
            color: var(--c_text);
            padding:0 4% 40px;
        }
        .part_imgText_imgs img{
            width: 100%;
            height: 466px;
            object-fit: cover;
        }
        @media (max-width:1199px) {
            .part_imgText_imgs img{
                height: 382px;
            }
        }
        @media (max-width:991px) {
            .part_imgText_imgs img{
                height: 311px;
            }
        }
        @media (max-width:768px) {
            .part_imgText_text>p{
                padding:0 0 20px;
            }
            .part_imgText_imgs img{
                height: 234px;
            }
        }
        @media (max-width:575px) {
            .part_imgText_imgs img{
                height: 168px;
            }
        }
        @media (max-width:450px) {
            .part_imgText_imgs img{
                height: 124px;
            }
        }
        /* 变化三 */
        .part_imgText_cnt {
            display: flex;
            flex-wrap: wrap;
        }
        .part_imgText_text,
        .part_imgText_imgs{
            flex:0 0 50%;
            max-width: 50%;
        }
        .part_imgText_text{
            padding-left: 2%;
        }
        .part_imgText_text>p{
            text-align: left;
            padding: 0;
        }
        @media (min-width:992px) {
            .part_imgText_imgs img{
                height: 340px;
            }
            .part_imgText_cnt {
                flex-direction: row-reverse;
            }
        }
        @media (max-width:991px) {
            .part_imgText_text,
            .part_imgText_imgs{
                flex:0 0 100%;
                max-width: 100%;
            }
            .part_imgText_text{
                padding-left: 0;
            }
            .part_imgText_text>p{
                padding:0 0 20px;
            }
        }
    </style>
    <script src="../js/jquery-3.5.1.min.js"></script>
    <script src="../js/bootstrap4.5.min.js"></script>
    <script src="../js/swiper-bundle.min.js"></script>
</head>

<body>
    <!-- title_center变成靠左 -->
    <div class="part_imgText title_left modular">
        <div class="public_width">
            <div class="part_imgText_cnt">
                <div class="part_imgText_text">
                    <div class="public_title">
                        <h2>公司简介</h2>
                        <p>Company Profile</p>
                    </div>
                    <p>XXX文化传播有限公司创立于2012年，以影视剧拍摄、活动策划，新品发布，商业演绎等广告业及其相关行业为服务内容。在广告传播领域我们更加专注于“市场与服务”，为客户量身定做策划方案，不断追求创新和完美，以助更合作伙伴腾飞。 我们拥有一批专业的、年轻的、高素质的工作团队，完善的运作管理流程，严谨的工作作风和良好的客户信誉。自创办以来，时刻关注市场动态，强调专业性与服务性的完美结合，以自己的诚挚和信誉赢得了众多客户的认可与信赖。 </p>
                </div>
                <!-- Swiper -->
                <div class="part_imgText_imgs">
                    <div class="swiper-container part_imgText_swiper">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <img src="https://22457828.s61i.faiusr.com/2/AD0I5NvaChACGAAg_Omc8wUoiPrV7gEwmgs43gM.jpg"
                                    alt="" />
                            </div>
                            <div class="swiper-slide">
                                <img src="https://22457828.s61i.faiusr.com/2/AD0I5NvaChACGAAgjYmd8wUo0Ozhqwcwmgs43gM.jpg"
                                    alt="" />
                            </div>
                            <div class="swiper-slide">
                                <img src="https://22457828.s61i.faiusr.com/2/AD0I5NvaChACGAAg5uqc8wUo8MDfhwUwmgs43gM.jpg"
                                    alt="" />
                            </div>
                        </div>
                        <!-- Add Pagination -->
                        <div class="swiper-pagination"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    $(function () {
        var part_imgText_swiper = new Swiper('.part_imgText_swiper', {
            loop : true,
            autoplay: {
                delay: 3000,
                stopOnLastSlide: false,
                disableOnInteraction: true,
            },
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
        });
        part_imgText_swiper.el.onmouseover = function(){ //鼠标放上暂停轮播
            part_imgText_swiper.autoplay.stop();
        }
        part_imgText_swiper.el.onmouseleave = function(){
            part_imgText_swiper.autoplay.start();
        }
    });
</script>

</html>